<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>资产类别列表</span>
        <div style="float: right">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="small"
            @click="handleAdd"
            >新增</el-button
          >
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="list"
        row-key="id"
        :default-expand-all="isExpandAll"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="类别名称"></el-table-column>
        <el-table-column prop="code" label="类别编码"></el-table-column>
        <el-table-column prop="order" label="排序"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_normal_disable"
              :value="scope.row.status"
            />
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-plus"
              @click="handleAdd(scope.row)"
              >新增</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <AddAssetType ref="dialogRef" @refresh="getList"></AddAssetType>
  </div>
</template>
  
<script>
import { pageList, del } from "@/api/prod/purchase/asset-type";
import AddAssetType from "./components/addAssetType.vue";
export default {
  name: "AssetType",
  dicts: ["sys_normal_disable"],
  components: {
    AddAssetType,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 表格树数据
      list: [],
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询类别列表 */
    getList() {
      this.loading = true;
      pageList({}).then((response) => {
        this.list = this.handleTree(response.data);
        this.loading = false;
      });
    },

    /** 转换类别数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },

    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false;
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },

    /** 新增按钮操作 */
    handleAdd(row) {
      this.$refs["dialogRef"].show("新增", null, row?.id);
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$refs["dialogRef"].show("修改", row?.id, row?.parentId);
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm('是否确认删除名称为"' + row.name + '"的数据项？')
        .then(function () {
          return del(row.id);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
};
</script>
  
<style scoped>
</style>